<template>
	<view class="video-container">
		<video id="myVideo" controls playsinline :src="videoObj.video" @play="handlePlay" @pause="handlePause"
			@fullscreenchange="handleFullscreenChange" @ended="handleEnded" show-play-btn="true" show-mute-btn="true"
			:initial-time="initial_time" @timeupdate="onTimeUpdate" object-fit="contain"
			mobilenet-hint-type="1"></video>
		<view class="title">
			{{videoObj.title}}
		</view>
		<view class="catalogue">
			<view class="catalogue-title">
				目录
			</view>
			<view class="catalogue-sum">
				共{{sum}}期
			</view>
		</view>
		<view class="episodes">
			<view class="episodesList">
				<view class="episodesItem" :class="{ active: index === currentEpisodeIndex }"
					v-for="(item, index) in columnArticleList" @click="playEpisode(index)">
					{{item.title}}
				</view>
			</view>
		</view>
		<!-- <u-loading-page loading-mode="spinner" :loading="loading" loadingText="课程正在路上"></u-loading-page> -->
		<view class="loading-box" v-if="loading">
			<u-loading-icon text="课程正在路上" textSize="18" :show="loading"></u-loading-icon>
		</view>
	</view>
</template>

<script>
	import {
		sendRequest
	} from '@/utils/quest.js';

	export default {
		data() {
			return {
				currentEpisode: 1,
				currentEpisodeIndex: 0,
				isFullscreen: false,
				videoContext: '111',
				isAutomatic: false,
				loading: true,
				limit: 70,
				page: 1,
				columnArticleList: [],
				videoObj: {},
				initial_time: 0,
				sum: 0
			};
		},
		onLoad(options) {
			this.htmlurl = options.htmlurl;
			this.getColumnArticle();
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo');
			const that = this
			// 尝试从本地存储中恢复当前集数
			uni.getStorage({
				key: 'currentEpisode',
				success(res) {
					that.currentEpisode = parseInt(res.data, 10)
					that.currentEpisodeIndex = that.currentEpisode - 1;
					console.log(`恢复了用户的进度：第${that.currentEpisode}集`)
					// 尝试恢复视频进度
					const episodeKey = `episode${that.currentEpisode}Progress`;
					console.log("尝试恢复视频进度episodeKey", episodeKey);
					uni.getStorage({
						key: episodeKey,
						success: (res) => {
							console.log("尝试恢复视频进度res", res.data);
							var videoContext = uni.createVideoContext('myVideo', this);
							that.initial_time = res.data //回显用户观看进度
							videoContext.seek(res.data); // 跳转到上次保存的进度
							videoContext.play(); // 开始播放视频
							console.log(`恢复了第${that.currentEpisode}集的进度`);
						},
						fail: () => {
							console.log(`第${that.currentEpisode}集无进度信息，从头开始播放`);
						}
					});
				},
				fail() {
					console.log('没有找到用户的进度记录');
				}
			})
		},
		created() {

		},
		mounted() {

		},
		onUnload() {
			const that = this
			const currentTime = this.currentTime
			const episodeKey = `episode${this.currentEpisode}Progress`;
			uni.setStorage({
				key: episodeKey,
				data: currentTime,
				success: () => {
					console.log(`已保存第${that.currentEpisode}集的进度：${currentTime}s`);
				},
				fail: (err) => {
					console.log('1err', err);
				}
			});
		},
		onReachBottom() {
			// 这里写上拉加载更多数据
			this.page += 1;
			this.getColumnArticle();
		},
		methods: {
			handlePlay() {
				console.log('视频开始播放');
			},
			handlePause() {
				console.log('视频暂停播放');
			},
			handleFullscreenChange(fullscreen) {
				this.isFullscreen = fullscreen;
				console.log('全屏状态变化：', fullscreen);
			},
			handleEnded() {
				console.log('视频播放结束');
			},
			onTimeUpdate(event) {
				console.log('执行这里');
				const that = this
				const currentTime = event.detail.currentTime;
				console.log('时间', currentTime);
				const episodeKey = `episode${this.currentEpisode}Progress`;
				uni.setStorage({
					key: episodeKey,
					data: currentTime,
					success: function() {
						console.log(`已保存第${that.currentEpisode}集的进度：${currentTime}s`);
					},
					fail: (err) => {
						console.log('2err', err);
					}
				});
				this.currentTime = currentTime
			},
			getColumnArticle() {
				const url = '/' + this.htmlurl + '.html';
				const {
					limit,
					page
				} = this;
				const reqBody = {
					limit,
					page
				};
				this.loading = true;
				sendRequest(url, 'POST', reqBody).then(res => {
					const {
						code,
						data
					} = res.data;
					console.log("11111111111", res);
					if (code === 0) {
						this.sum = res.data.sum
						uni.setNavigationBarTitle({
							title: res.data.type.classname
						});
						if (this.page === 1) {
							this.columnArticleList = data;
							this.videoObj = data[this.currentEpisode - 1] || data[0];
							this.currentEpisodeIndex = this.currentEpisode - 1;
						} else {
							// 否则，追加新数据
							this.columnArticleList = this.columnArticleList.concat(data);
						}
					}
					this.loading = false;
				}).catch(err => {
					console.error('请求失败', err);
					this.loading = false;
				});

			},
			playEpisode(index) {
				const that = this
				this.currentEpisode = index + 1;
				this.currentEpisodeIndex = index;
				this.videoObj = this.columnArticleList[index];

				// 尝试恢复视频进度
				const episodeKey = `episode${this.currentEpisode}Progress`;
				uni.getStorage({
					key: episodeKey,
					success: (res) => {
						const videoContext = uni.createVideoContext('myVideo', this);
						that.initial_time = res.data
						videoContext.seek(res.data);
						videoContext.play();
						console.log(`恢复了第${this.currentEpisode}集的进度`);
					},
					fail: () => {
						const videoContext = uni.createVideoContext('myVideo', this);
						videoContext.play();
						console.log(`第${this.currentEpisode}集无进度信息，从头开始播放`);
					}
				});

				// 保存当前集数到本地存储
				uni.setStorage({
					key: 'currentEpisode',
					data: this.currentEpisode,
					success: () => {
						console.log(`已保存当前集数：第${this.currentEpisode}集`);
					},
					fail: (err) => {
						console.log('1err', err);
					}
				});
			}
		}
	};
</script>

<style scoped>
	.video-container {
		width: 100%;
		height: 100%;
		height: auto;
		/* overflow: hidden; */
	}

	video {
		width: 100%;
		height: 520rpx;

		/* height: auto; */
	}

	.video-btn {
		display: flex;
		padding-top: 24rpx;
	}


	.title {
		font-size: 26rpx;
		padding: 24rpx;
		border-bottom: 1rpx solid #E6E6E6;
		margin: 0 24rpx;
	}

	/* .episodes {
		padding-top: 26rpx;
	}

	.episodesList {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}


	.episodesItem {
		text-align: center;
		border: 1rpx solid #E6E6E6;
		flex: 0 0 calc(20% - 24rpx);
		margin: 8rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 6rpx;
	}

	.episodesItem.active {
		background-color: #f0f0f0;
		/* 设置背景颜色 */
	/* font-weight: bold; */
	/* 加粗字体 */
	/* border-color: #007AFF; */
	/* 改变边框颜色 */
	/* } */
	.catalogue {
		padding: 40rpx 20rpx;
		display: flex;
		border: 1rpx solid #E6E6E6;
	}

	.catalogue-title {}

	.catalogue-sum {
		padding-left: 8rpx;
	}

	.episodesList {
		padding: 20rpx 20rpx;
	}

	.episodesItem {
		padding: 40rpx 20rpx;
		border-bottom: 1rpx solid #E6E6E6;
	}

	.episodesItem.active {
		background-color: #f0f0f0;
		font-weight: bold;
	}

	.loading-box {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 260rpx;
	}
</style>